<template>
  <div class="cuscomp">
    <div class="cuscomp_tile">同比</div>
    <el-input class="cuscomp_input" v-model="state.value1"></el-input>
    <div class="cuscomp_tile">环比</div>
    <el-input class="cuscomp_input" v-model="state.value2"></el-input>
  </div>
</template>

<script setup>
import { reactive, watchEffect,watch } from 'vue'
const props = defineProps({
  modelValue: Array
})
const state = reactive({
  value1: '',
  value2: ''
})
const emit = defineEmits(['update:modelValue'])
watchEffect(() => {
  if (state) {
    emit('update:modelValue', [state.value1, state.value2])
  }
})
watch(()=>props.modelValue, () => {
  if (props.modelValue instanceof Array) {
    state.value1 = props.modelValue[0] ? props.modelValue[0] : ''
    state.value2 = props.modelValue[1] ? props.modelValue[1] : ''
  } else {
    state.value1 = ''
    state.value2 = ''
  }
} )
</script>

<style lang="scss" scoped>
.cuscomp {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  .cuscomp_tile {
    width: 40px;
    text-align: right;
    padding-right: 10px;
  }

  .cuscomp_input {
    width: 300px;
  }
}
</style>